<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<div id="loan-exam-tabs">
 			<ul>
 				<li><a href="#loan-tab-exam1">ตัวอย่างการเรียกใช้ Web Service</a></li>
 				<li><a href="#loan-tab-exam2">ตัวอย่าง Source Code in JAVA</a></li>
 				<li><a href="#loan-tab-exam3">ตัวอย่าง Source Code in .Net</a></li>
 			</ul>
 			<div id="loan-tab-exam1" style="overflow: hidden; width: 97%">		 		
		 		<form action="#" id="loanFrm">
		 			<div id="form-field-left">
						<div class="field">
							<label for="cpk">รหัส ช.พ.ค.:</label> <input type="text" id="cpk" name="param.cpk" class="text ui-widget-content ui-corner-all" />
						</div>
						<div class="field">
							<label for="cps">รหัส ช.พ.ส.:</label> <input type="text" id="cps" name="param.cps" class="text ui-widget-content ui-corner-all" />
						</div>
						
						<div class="field">
							<label for="idCard">หมายเลขบัตร ปปช:</label> <input type="text" id="idCard" name="param.idCard" class="text ui-widget-content ui-corner-all" />
						</div>
					</div>
					<div id="form-field-rigth">
					<div class="field">
						<label for="name">ชื่อ:</label>  <input type="text" id="name" name="param.name" class="text ui-widget-content ui-corner-all" />
					</div>
					<div class="field">
						<label for="surname">นามสกุล:</label> <input type="text" id="surname" name="param.surname" class="text ui-widget-content ui-corner-all" />
						
					</div>
					<div class="field">
						
						<input type="button" id="searchbtn1" value="ค้นหาข้อมูล" > 
						<span style="display:none;" id="indicator1"><img alt="loading" style="position: relative; top:5px" src="../images/loading.gif"> Loading... </span>
						
					</div>
					</div>
					
				</form> 			
				<div id="loan-result" style="float: left;"></div>			
			</div>
			<div id="loan-tab-exam2"  style="overflow: hidden; width: 97%">
				<p>			
	....
				</p>
			</div>
			<div id="loan-tab-exam3"  style="overflow: hidden; width: 97%">
				<p>			
	....
				</p>
			</div>
		</div>		
		<script type="text/javascript">
		//tab's member dialog
		$("#loan-exam-tabs").tabs();
	
		var loanGrid = $("#loan-result").flexigrid(
				{					
					dataType: 'json',
					colModel : [
						{display: 'No', name : 'no', width : 40, sortable : true, align: 'center'},
						{display: 'รหัส ช.พ.ค.', name : 'cpk', width : 80, sortable : true, align: 'center'},
						{display: 'รหัส ช.พ.ส.', name : 'cps', width : 80, sortable : true, align: 'center'},
						{display: 'หมายเลขบัตร ปปช', name : 'idcard', width : 120, sortable : true, align: 'left'},					
						{display: 'ชื่อ - สกุล', name : 'fullname', width : 200, sortable : true, align: 'left'}
						],
					sortname: "No",
					sortorder: "asc",
					title: 'ผลลัพธ์',
					showTableToggleBtn: false,
					width: 630,			
					height: 200
				}
		);
		$("#searchbtn1").click(function(){
			$("#searchbtn1").css("display","none");
			$("#indicator1").css("display","inline");
			$.post("json/invoke-loan",$("#loanFrm").serialize(),function(data){
				if(data.success){				
					loanGrid.flexAddData(data.gridModel);					
				}else{
					apMessageBox.error({errorImage:"../images/error-32x32.png",title: "ERROR",
						message:"Exception Occured!! :: "+data.message,stacktrace:data.stacktrace});
				}
				$("#indicator1").css("display","none");
				$("#searchbtn1").css("display","inline");
			});
		});
		
		</script> 